<template>
  <div class="side-menu">
    <el-menu 
      :default-active="activeMenu"
      class="el-menu-vertical"
      :collapse="isCollapse"
      :router="true"
      @select="handleMenuSelect"
    >
      <!-- 工作台 -->
      <el-menu-item index="/">
        <el-icon><HomeFilled /></el-icon>
        <template #title>
          <Translate keyName="nav.workstation" />
        </template>
      </el-menu-item>
      
      <!-- 线索中心 -->
      <div class="menu-section">
        <div class="menu-section-title">
          <Translate keyName="nav.leadsCenter" />
        </div>
        <!-- 海关数据 - 已注释掉 -->
        <!-- <el-menu-item index="/customs-trade-info" :class="{ 'is-active': activePath === '/customs-trade-info' }">
          <el-icon><i class="ship-icon"></i></el-icon>
          <template #title>
            <Translate keyName="nav.customs" />
          </template>
        </el-menu-item> -->
        <!-- 全球企业库 -->
        <el-menu-item index="/global-enterprise" :class="{ 'is-active': activePath === '/global-enterprise' }">
          <el-icon><OfficeBuilding /></el-icon>
          <template #title>
            <Translate keyName="nav.globalCompanies" />
          </template>
        </el-menu-item>
        <!-- 广交会采购商 -->
        <el-menu-item index="/canton-fair-purchasers" :class="{ 'is-active': activePath === '/canton-fair-purchasers' }">
          <el-icon><ShoppingBag /></el-icon>
          <template #title>
            <Translate keyName="nav.cantonFair" />
          </template>
        </el-menu-item>
        <!-- 广交会参展商 -->
        <el-menu-item index="/canton-fair-exhibitors" :class="{ 'is-active': activePath === '/canton-fair-exhibitors' }">
          <el-icon><GoodsFilled /></el-icon>
          <template #title>
            <Translate keyName="nav.cantonFairExhibitors" />
          </template>
        </el-menu-item>
        <el-menu-item index="/linkedin" :class="{ 'is-active': activePath === '/linkedin' }">
          <el-icon><Connection /></el-icon>
          <template #title>
            <Translate keyName="nav.linkedin_leads" />
          </template>
        </el-menu-item>
        <el-menu-item index="/facebook" :class="{ 'is-active': activePath === '/facebook' }">
          <el-icon><Present /></el-icon>
          <template #title>
            <Translate keyName="nav.facebook_leads" />
          </template>
        </el-menu-item>
        <el-menu-item index="/twitter" :class="{ 'is-active': activePath === '/twitter' }">
          <el-icon><Bell /></el-icon>
          <template #title>
            <Translate keyName="nav.twitter_leads" />
          </template>
        </el-menu-item>
      </div>
      
      <!-- 智能搜邮 -->
      <el-menu-item index="/intelligent-mail-search">
        <el-icon><Message /></el-icon>
        <template #title>
          <Translate keyName="tools.smartEmailSearch" />
        </template>
      </el-menu-item>
      
      <!-- 邮件反查 -->
      <el-menu-item index="/email-reverse-check">
        <el-icon><Postcard /></el-icon>
        <template #title>
          <Translate keyName="nav.emailLookup" />
        </template>
      </el-menu-item>
      
      <!-- 域名反查 -->
      <el-menu-item index="/domain-reverse-check">
        <el-icon><Monitor /></el-icon>
        <template #title>
          <Translate keyName="nav.domainLookup" />
        </template>
      </el-menu-item>
      
      <!-- 社媒反查 -->
      <el-menu-item index="/social-media-reverse-check">
        <el-icon><Link /></el-icon>
        <template #title>
          <Translate keyName="nav.socialLookup" />
        </template>
      </el-menu-item>
      
      <!-- 营销辅助工具标题 - 介绍性标签 -->
      <div class="menu-section-title">
        <Translate keyName="nav.statisticalTools" />
      </div>
      
      <!-- 短信中心 - 临时注释掉短信中心功能 -->
      <!-- <el-menu-item index="/sms">
        <el-icon><ChatLineRound /></el-icon>
        <template #title>
          <Translate keyName="nav.smsCenter" />
        </template>
      </el-menu-item> -->
      
      <!-- 邮件中心 -->
      <el-menu-item index="/email">
        <el-icon><Message /></el-icon>
        <template #title>
          <Translate keyName="nav.emailCenter" />
        </template>
      </el-menu-item>

      <!-- 管理中心标题 - 介绍性标签 -->
      <div class="menu-section-title">
        <Translate keyName="nav.managementCenter" />
      </div>

      <!-- 推广返佣 -->
      <el-menu-item index="/promotion">
        <el-icon><Share /></el-icon>
        <template #title>
          <Translate keyName="personalCenter.promotionRebate" />
        </template>
      </el-menu-item>

      <!-- 个人中心 -->
      <el-menu-item index="/personal-center">
        <el-icon><UserFilled /></el-icon>
        <template #title>
          <Translate keyName="nav.personalCenter" />
        </template>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {
  HomeFilled,
  Document,
  Setting,
  ChatDotRound,
  Connection,
  Histogram,
  Notebook,
  Message,
  Star,
  ShoppingBag,
  User,
  UserFilled,
  ChatLineRound,
  Monitor,
  Share,
  Postcard,
  OfficeBuilding,
  Present,
  Bell,
  GoodsFilled,
  Link
} from '@element-plus/icons-vue'
import Translate from '@/components/Translate.vue'

const route = useRoute()
const router = useRouter()
const isCollapse = ref(false)

const activeMenu = computed(() => {
  const { path } = route
  return path
})

const activePath = computed(() => {
  return route.path
})

// 处理菜单选择事件
const handleMenuSelect = (path) => {
  // 如果点击的是当前路径，并且是Dashboard页面，触发刷新
  if (path === '/' && route.path === '/') {
    // 触发Dashboard页面数据刷新
    triggerDashboardRefresh()
  }
}

// 触发Dashboard刷新的函数
const triggerDashboardRefresh = () => {
  // 创建和分发自定义事件，让Dashboard组件知道需要刷新数据
  const refreshEvent = new CustomEvent('dashboard-refresh', {
    detail: { timestamp: Date.now() }
  })
  window.dispatchEvent(refreshEvent)
}

// 直接使用window.location的方式进行页面跳转，绕过Vue Router的所有守卫和钩子
const handleMenuClick = (path) => {
  if (path === route.path) {
    return;
  }

  // 使用router.push方法进行导航
  router.push(path);
}
</script>

<style scoped>
.side-menu {
  height: calc(100vh - 60px);
  border-right: 1px solid #e6e6e6;
  position: relative;
  width: 220px;
  flex-shrink: 0;
  overflow-y: hidden;
}

.el-menu-vertical:not(.el-menu--collapse) {
  width: 220px;
  height: 100%;
}

/* 缩小内部元素宽度 */
:deep(.el-menu-item) {
  padding-right: 10px !important;
  min-width: auto !important;
  text-align: center; /* 文本居中 */
  justify-content: center; /* 图标和文本居中 */
}

:deep(.el-sub-menu__title) {
  padding-right: 10px !important;
  text-align: center; /* 文本居中 */
  justify-content: center; /* 图标和文本居中 */
}

/* 文本省略处理 */
:deep(.el-menu-item span), 
:deep(.el-sub-menu__title span) {
  display: inline-block;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center; /* 确保文本居中 */
}

/* 图标居中调整 */
:deep(.el-menu-item .el-icon),
:deep(.el-sub-menu__title .el-icon) {
  margin-right: 5px;
}

.menu-section-title {
  padding: 15px 15px 5px;
  font-size: 12px;
  color: #909399;
  margin-top: 10px;
  text-align: center; /* 文本居中 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 滚动条设计 */
.el-menu-vertical {
  overflow-y: auto;
  overflow-x: hidden; /* 禁用水平滚动条 */
  height: 100%;
  position: relative;
}

/* 自定义滚动条样式 */
.el-menu-vertical::-webkit-scrollbar {
  width: 6px;
}

.el-menu-vertical::-webkit-scrollbar-thumb {
  background-color: #909399;
  opacity: 0.3;
  border-radius: 3px;
}

.el-menu-vertical::-webkit-scrollbar-thumb:hover {
  opacity: 0.6;
}

/* 活动和悬停样式 */
.el-menu-item.is-active {
  background-color: #ecf5ff !important;
}

.el-menu-item:hover {
  background-color: #f5f7fa !important;
}

.menu-item-container {
  text-align: left;
}

/* 添加自定义图标 - 船舶图标 */
.ship-icon {
  background-image: url('../assets/icons/ship.svg');
  width: 16px;
  height: 16px;
  display: inline-block;
}

/* 自定义menu-item样式 */
.menu-section {
  margin: 8px 0;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 50px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.menu-item:hover {
  background-color: #f5f7fa;
}

.menu-item.active {
  background-color: #ecf5ff;
  color: #409EFF;
}

.menu-icon {
  margin-right: 10px;
  display: flex;
  align-items: center;
}

.menu-title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style> 